<template>
  <div class="column_Nav">
    <van-nav-bar
      :border="false"
      title="栏目管理"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="prompt">点击删除以下频道</div>
    <div class="column_list">
      <div
        class="column"
        v-for="(item, index) in activeList"
        :key="index"
        @click="deleteColumn(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="prompt">点击添加以下频道</div>
    <div class="column_list">
      <div
        class="column"
        v-for="(item, index) in addList"
        :key="index"
        @click="addColumn(index)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //启用列表
      activeList: [],
      //添加列表
      addList: [],
    };
  },
  created() {
    //当本地储存中存在activeList时不用请求数据直接渲染
    if (localStorage.getItem("activeList")) {
      this.activeList = JSON.parse(localStorage.getItem("activeList"));
      this.addList = JSON.parse(localStorage.getItem("addList"));
    } else {
      //获取分类详情
      this.$axios({
        url: "/category",
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          // console.log(res);
          this.activeList = res.data.data;
          // console.log(this.activeList);
        }
      });
    }
  },
  //数据有变化的时候就第一时间备份
  watch: {
    activeList() {
      localStorage.setItem("activeList", JSON.stringify(this.activeList));
    },
    addList() {
      localStorage.setItem("addList", JSON.stringify(this.addList));
    },
  },
  methods: {
    //处理删除事件
    deleteColumn(deleteId) {
      console.log(deleteId);
      //只有一个的时候不能在删除选项
      if (this.activeList.length == 1) {
        this.$toast("只有一个啦,不能在删啦");
        return;
      } else {
        this.addList.push(this.activeList[deleteId]);
        this.activeList.splice(deleteId, 1);
      }
    },
    //处理添加事件
    addColumn(addId) {
      this.activeList.unshift(this.addList[addId]);
      this.addList.splice(addId, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.column_Nav {
  background-color: papayawhip;
  height: 100%;
  .van-nav-bar {
    //组件背景颜色不设置
    background-color: unset;
  }
  .prompt {
    font-size: 14px;
    color: rgb(112, 91, 91);
    margin: 10px;
  }
  .column_list {
    display: flex;
    flex-wrap: wrap;
    .column {
      width: 60/360 * 100vw;
      height: 30/360 * 100vw;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 30/360 * 100vw;
      background-color: #e4e4e4;
      margin: 5px;
    }
  }
}
</style>